<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="vue.js"></script>
  </head>
  <body>
      <div id="app">
         <input type="text" v-model="msg">
         <p v-text="msg1"></p>
         <p v-html="msg2"></p>
         <input v-bind:value="msg3">
        <button @click="showInfo">请单击</button>
        <p>{{msg4}}</p>
        <div v-for="(item,key) in list" data-id="key">索引是：{{key}},元素内容是：{{item}}</div>
        <div v-show="isShow" style="background-color: #ccc;">我是v-if</div>
        <button @click="isShow=!isShow">显示/隐藏</button>
        <hr>
        <button @click="add" >添加学生</button>
        <button @click="del" >删除学生</button>
        <table border="1" width="50%" style="border-collapse: collapse;">
            <tr>
                <th>班级</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            <tr align="center" v-for="item in students">
                <td>{{item.grade}}</td>
                <td>{{item.name}}</td>
                <td>{{item.gender}}</td>
                <td>{{item.age}}</td>
            </tr>
        </table>
      </div>
      <script>
        var vm=new Vue({
          el: "#app",
          data: {
            msg : 'v-model指令',
            msg1 : 'v-text',
            msg2 : '<h2>我是v-html<h2>',
            msg3 : '我是v-bind',
            msg4 : '请单击按钮查看内容',
            list : [1,2,3,4,5],
            isShow : true,
            students :[]
          },
          methods:{
              showInfo(){
                  this.msg4="v-on"
              },
              add(){
                  var student ={grade : '1',name : "张三",gender : '男',age : 25}
                  this.students.push(student)
              },
              del(){
                  this.students.pop()
              }
          }
        })
      </script>
</body>
</html>
